import { color } from "echarts";

// 动态计算柱形图的高度（定一个max）
function lineMaxHeight() {
  const maxValue = Math.max(
    ...customerBatteryCityData.map((item) => item.value)
  );
  return 0.3;
}
// 柱状体的主干
function lineData() {
  return customerBatteryCityData.map((item) => {
    return {
      coords: [
        geoCoordMap[item.name],
        [
          geoCoordMap[item.name][0],
          geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
        ],
      ],
    };
  });
}
// 柱状体的顶部
function scatterData() {
  return customerBatteryCityData.map((item) => {
    return [
      geoCoordMap[item.name][0],
      geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
      item,
    ];
  });
}
// 柱状体的底部
function scatterData2() {
  return customerBatteryCityData.map((item) => {
    return {
      name: item.name,
      value: geoCoordMap[item.name],
    };
  });
}
var geoCoordMap = {
  锦江区: [104.118622, 30.597473],
  青羊区: [104.055731, 30.667648],
  金牛区: [104.043487, 30.692058],
  武侯区: [104.05167, 30.630862],
  成华区: [104.143973, 30.688388],
  龙泉驿区: [104.269181, 30.56065],
  青白江区: [104.25494, 30.883438],
};
var customerBatteryCityData = [
  { name: "锦江区", value: 1, fdl: "99%", tds: 1, fds: 101 },
  // { name: "青羊区", value: 1, fdl: '99%', tds: 1, fds: 101 },
  // { name: "金牛区", value: 1, fdl: '99%', tds: 1, fds: 101 },
  // { name: "武侯区", value: 1, fdl: '99%', tds: 1, fds: 101 },
  { name: "成华区", value: 1, fdl: "99%", tds: 1, fds: 101 },
  { name: "龙泉驿区", value: 1, fdl: "99%", tds: 1, fds: 101 },
  { name: "青白江区", value: 1, fdl: "99%", tds: 1, fds: 101 },

  // { name: "信阳市", value: 1, fdl: '99%', tds: 1, fds: 101 },
];
var bgpng =
  "image://";
var line =
  "image://";
export default function () {
  console.log(43, lineData());
  console.log(44, scatterData());
  return {
    backgroundColor: "#000",
    tooltip: {
      trigger: "item",
      triggerOn: "click",
      showDelay: 0, //浮层显示的延迟
      transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
      alwaysShowContent: true,
      enterable: true,
      className: "topbox",
      extraCssText:
        "height: 140px;background:rgb(165,42,42,0);color:#fff;border:none;box-shadow:none",
      formatter: function (item) {
        if (item.componentSubType == "map") {
          // 详情
          return;
        }
        var tipHtml = "";
        tipHtml =
          '<div class="tooltip-box">' +
          item.data[2].name +
          "&nbsp;&nbsp;&nbsp;<br />" +
          "合格率&nbsp;&nbsp;" +
          item.data[2].fdl +
          "&nbsp;&nbsp;<br/>" +
          "不合格数&nbsp;&nbsp;" +
          item.data[2].tds +
          "&nbsp;&nbsp;<br/>" +
          "合格数&nbsp;&nbsp;" +
          item.data[2].fds +
          "&nbsp;&nbsp;";
        // + '</span><button onclick="lookVideoGo()">查看</button></div>';
        return tipHtml;
      },
      // position: [10, 10],
      backgroundColor: "#fff",
    },
    geo: [
      {
        map: "CD",
        aspectScale: 0.9,
        roam: false, // 是否允许缩放
        zoom: 1.2, // 默认显示级别
        layoutSize: "104%",
        selectedMode: "single",
        layoutCenter: ["55%", "50%"],
        itemStyle: {
          normal: {
            // areaColor: {
            //     type: 'linear-gradient',
            //     x: 0,
            //     y: 400,
            //     x2: 0,
            //     y2: 0,
            //     colorStops: [{
            //         offset: 0,
            //         color: 'rgba(37,108,190,0.3)' // 0% 处的颜色
            //     }, {
            //         offset: 1,
            //         color: 'rgba(15,169,195,0.3)' // 50% 处的颜色
            //     }],
            //     global: true // 缺省为 false
            // },
            borderColor: "rgb(24,254,254)",
            borderWidth: 3,
            areaColor: "#000",
          },
        },
        label: {
          show: true,
          color: "#fff",
        },
        emphasis: {
          itemStyle: {
            areaColor: "#3399ff",
          },
          label: {
            show: true,
            color: "#fff",
          },
        },
        select: {
          itemStyle: {
            areaColor: "red",
          },
          label: {
            show: true,
            color: "#fff",
          },
        },
        zlevel: 3,
      },
      {
        map: "CD",
        aspectScale: 0.9,
        roam: false, // 是否允许缩放
        zoom: 1.2, // 默认显示级别
        layoutSize: "104%",
        layoutCenter: ["55%", "51%"],
        itemStyle: {
          normal: {
            // borderColor: 'rgb(24,254,254)',
            borderColor: "#004db5",
            borderWidth: 2,
            shadowColor: "#2C99F6",
            shadowOffsetY: 0,
            shadowBlur: 120,
            areaColor: "rgba(29,85,139,0.2)",
          },
        },
        zlevel: 2,
        silent: true,
      },
      {
        map: "CD",
        aspectScale: 0.9,
        roam: false, // 是否允许缩放
        zoom: 1.2, // 默认显示级别
        layoutSize: "104%",
        layoutCenter: ["55%", "51.5%"],
        itemStyle: {
          areaColor: "rgba(0,27,95,0.4)",
          borderColor: "#004db5",
          borderWidth: 3,
        },
        zlevel: 1,
        silent: true,
      },
    ],
    series: [
      // map
      {
        geoIndex: 0,
        showLegendSymbol: true,
        type: "map",
        roam: false,
        // roam: false
        label: {
          show: false,
          normal: {
            show: false,
            textStyle: {
              color: "#fff",
            },
          },
          emphasis: {
            show: false,
            textStyle: {
              color: "#fff",
            },
          },
        },
        itemStyle: {
          normal: {
            borderColor: "#2ab8ff",
            borderWidth: 1.5,
            areaColor: "#000",
          },
          emphasis: {
            areaColor: "#2AB8FF",
            borderWidth: 0,
            // color: 'red'
          },
        },
        map: "CD", // 使用
        data: customerBatteryCityData.map((i) => {
          return {
            ...i,
            selected: i.name == "锦江区" ? true : false,
          };
        }),
        // data: this.difficultData //热力图数据   不同区域 不同的底色
      },
      //线体
      {
        type: "scatter",
        silent: true,
        coordinateSystem: "geo",
        geoIndex: 0,
        zlevel: 5,
        itemStyle: {
          color: "#00FFF6",
          opacity: 1,
        },
        symbol: line,
        symbolSize: [22, 80],
        symbolOffset: [8, 140],
        z: 999,

        data: scatterData(),
      },
      {
        type: "scatter",
        roam: false, // 将 roam 属性设置为 false
        coordinateSystem: "geo",
        geoIndex: 0,
        zlevel: 5,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              var name = params.data[2].name;
              var value = params.data[2].fdl;
              // var text = `{tline|${name}}:{fline|${value}}`
              var text = `{tline|合格率}:{fline|${value}}`;
              return text;
            },
            color: "#fff",
            rich: {
              fline: {
                // padding: [0, 25],
                color: "#fff",
                fontSize: 14,
                fontWeight: 400,
              },
              tline: {
                // padding: [0, 27],
                color: "#ABF8FF",
                fontSize: 12,
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: "#00FFF6",
          opacity: 1,
        },
        symbol: bgpng,
        symbolSize: [80, 40],
        symbolOffset: [60, 102],
        z: 999,
        data: scatterData(),
      },
      // 柱状体的底部
      {
        geoIndex: 0,
        zlevel: 4,
        type: "effectScatter",
        coordinateSystem: "geo",
        rippleEffect: {
          scale: 10,
          brushType: "stroke",
        },
        showEffectOn: "render",
        itemStyle: {
          normal: {
            color: "#00FFFF",
          },
        },
        label: {
          show: false,
          normal: {
            formatter: "{b}",
            position: "bottom",
            color: "#fff",
            fontSize: 12,
            distance: 10,
            show: false,
          },
        },
        symbol: "circle",
        symbolSize: [10, 5],
        itemStyle: {
          // color: '#F7AF21',
          color: "rgb(22,255,255, 1)",
          opacity: 1,
        },
        data: scatterData2(),
      },
      // 底部外框
      {
        type: "scatter",
        coordinateSystem: "geo",
        geoIndex: 0,
        zlevel: 4,
        label: {
          show: false,
        },
        symbol: "circle",
        symbolSize: [1, 1],
        itemStyle: {
          color: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: "rgb(22,255,255, 0)", // 0% 处的颜色
              },
              {
                offset: 0.75,
                color: "rgb(22,255,255, 0)", // 100% 处的颜色
              },
              {
                offset: 0.751,
                color: "rgb(22,255,255, 1)", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgb(22,255,255, 1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          opacity: 1,
        },
        silent: true,
        data: scatterData2(),
      },
    ],
  };
}
